<template>
  <div>
    <input type="text" ref="myname" />
    <button @click="addItem">add</button>
    <ul>
      <li v-for="(item, index) in state.list" :key="item">
        {{ item }}- <button @click="removeItem(index)">del</button>
      </li>
    </ul>
  </div>
</template>
<script>
import { reactive, ref } from 'vue'
export default {
  setup () {
    const state = reactive({
      list: ['aaa', 'bbb', 'ccc']
    })
    const myname = ref('')

    const addItem = () => {
      console.log(myname)
      state.list.push(myname.value.value)
      myname.value.value = ''
    }
    const removeItem = (index) => state.list.splice(index, 1)

    return {
      state,
      myname,
      addItem,
      removeItem
    }
  }
}
</script>
